<template>
	<view class="read-cont p-relative">
		<!-- 右上角页码 -->
		<view class="page-info p-absolute p-5 scale-08">{{ pageInfo.current_page }}/{{ pageInfo.page_count }}</view>

		<!-- 图片本体 -->
		<scroll-view scroll-y class="manga-cont">
			<template v-for="item in renderList">
				<template v-if="item.url==='null'">					
					<image
						class=""
						mode="widthFix"
						:key="item.url"
						:src="item.url"></image>
				</template>
				<template v-else>
					<image :src="mangaLoadingImg" mode="widthFix"></image>
				</template>
			</template>
		</scroll-view>

		<!-- 下部 工具栏 -->
		<view class="tool-bar"></view>
	</view>
</template>

<script setup>
let mangaLoadingImg = new URL('../../static/img/manga_loading.png', import.meta.url).href;
import {ref,reactive,computed,watch,onBeforeMount,onMounted,onUpdated,getCurrentInstance} from 'vue'
import { goBack, goHome, goMangaDetail } from '../../utils/routerNavigator.js';

let {proxy} = getCurrentInstance()

// let props = defineProps({
// 	renderList:{
// 		type:Array,
// 		default:()=>[]
// 	},
// })

let imgRenderBox = ref(null)
let loadingMore = ref(null)

// 页码信息
let pageInfo = reactive({	
	current_page:1,
	page_count:9999
})
let rateValue = ref(5);

// 原始漫画列表--未处理---目前假设一话 10页 初始处理 在 下面get请求
let mangaImageList = reactive([]);

// 漫画列表--页面渲染
let renderList = computed(() => {
	let temp = []
	
	mangaImageList.map((item,index)=>{
		// 
		temp.push(item)
	})
	
	return temp

});

let imgObserver = new IntersectionObserver(callback)
//把callback 写在 外面，方便理解，亦可直接写在构造函数参数内
function callback(entries){
    console.log('执行懒加载监听')
    //entries 可接受

    //被观察的 图片数组对象 
    entries.forEach(item=>{
        // 调用 被观察的目标元素 是否 与可视窗口 出现交叉区域
        if(item.isIntersecting){
            //获取 被观察的目标元素
            const targetImg = item.target
            
            requsetNewImg()

            // 在懒加载完成后可执行 停止观察，节约性能资源
            // 此处并 需要 取消 监听 ，图片新增后，loading 就会 被新图片挤到不可视区域，待下一次出现在被监听
            // imgObserver.unobserve(targetImg)
        }
    })
}

// 新增 图片
async function requsetNewImg(){

    // 使用 网络请求 
    let resData = await getNewImg()
    
    // 其实 应该 根据 本案例 的需求 来 说 ，此处至应该返回 四个图片链接数据
    // let newImgData =  resData.data.data.imgList;

    // for(let i=0;i<4;i++){
    //     let index = Math.floor(Math.random()*newImgData.length)
    //     // increaseImgList.push(imgListDataBase[index])

    //     // 向 响应式 的图片渲染数据源 新增新图片
    //     renderImgList.value[i].imgUrl.push(newImgData[index])
    // }
}

// test API
function getMangaListAPI(){
	let test = [
		"https://hi77-overseas.mangafuna.xyz/dianjuren/0f432/1647500603070001.jpg.c800x.jpg",
		"https://hi77-overseas.mangafuna.xyz/dianjuren/0f432/1647500607350004.jpg.c800x.jpg",
		'https://hi77-overseas.mangafuna.xyz/dianjuren/b329a/1647068622690001.jpg.c800x.jpg',
		'https://hi77-overseas.mangafuna.xyz/dianjuren/b329a/1647068622730003.jpg.c800x.jpg',
		"https://hi77-overseas.mangafuna.xyz/dianjuren/b329a/1647068622760004.jpg.c800x.jpg"
	]	
	// let random = (Math.floor(Math.random()*(test.length)))
	
	return new Promise((resolve,reject)=>{
		resolve({
			code:0,
			data:{				
				count:10,
				list:[...test]
			}
		})
	})
}
// 请求
function getMangaList(){
	getMangaListAPI().then(res=>{
		console.log(res);
		
		// // test 假设 一话 10页
		
		// 处理总页数
		// for(let i=0;i<10;i++){
		// 	mangaImageList.push({url: null})
		// }
		
		// mangaImageList = 
		let temp = []
		
		res.data.list.forEach(item=>{
			temp.push({
				url:item
			})
		})
		
		mangaImageList = temp
		
		
		
		
	}).catch(err=>{console.log(err)})
}


onMounted(async ()=>{
	let res = await getMangaList()
	// console.log(res);
	
    // 一定要等 加载完成后 才能 获取  ref 绑定的 imgRenderBox
    // console.log(loadingMore.value)
    // imgObserver.observe(loadingMore.value)
})

</script>

<style lang="scss" scoped>
.read-cont {
	width: 100wh;
	height: 100vh;

	.page-info {
		transform-origin: 100% 0;
		top: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.5);
		color: rgba(255, 255, 255, 0.8);
		z-index: 99;
	}

	.manga-cont {
		width: 100%;
		height: 100%;
		overflow: scroll;
		background-color: rgba(0, 0, 0, 0.2);

		image {
			width: 100%;
		}
	}
}
</style>
